<% title "O RLY Parody Book Generator for Slack" %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'application' %>


<%= content_for :page_meta do %>
<link rel="canonical" href="https://dev.to/rlyslack"/>
<meta name="description" content="Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!">
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">

<meta property="og:type" content="website" />
<meta property="og:url" content="https://dev.to/rlyslack" />
<meta property="og:title" content="O RLY Parody Book Generator for Slack" />
<meta property="og:image" content="http://i.imgur.com/OIT6xoq.png" />
<meta property="og:description" content="Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!" />
<meta property="og:site_name" content="The Practical Dev" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ThePracticalDev">
<meta name="twitter:title" content="O RLY Parody Book Generator for Slack">
<meta name="twitter:description" content="Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!">
<meta name="twitter:image:src" content="http://i.imgur.com/OIT6xoq.png">
<% end %>

<div class="generator-container">

  <h2><span class="typing"></span></h2>
  <img class="loading" src="https://www.versioneye.com/assets/loadingbar-90e87b61b1413986fbe5fd642252b7b459407b4287394c76bd619ab05f8b0c69.gif" alt="loading"/>
  <img class="cover" src="http://i.imgur.com/XZ1UPCt.png" alt="Making Your Own Parody Covers"/>
  <a class="slack-butt" href="https://slack.com/oauth/authorize?scope=commands+bot+chat:write:bot+groups:write&client_id=3128000905.33373336070"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"></a>
  <h4>Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!</h4>
  <a class="second-slack" href="https://slack.com/oauth/authorize?scope=commands+bot+chat:write:bot+groups:write&client_id=3128000905.33373336070"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"></a>
  <div class="loved">
    Loved by thousands of Slack teams!
    <br/>
    <!-- Broken Deviant Art image -->
    <img src="http://orig14.deviantart.net/587e/f/2016/074/a/5/heart_pulse_by_lalovelycake-d9v9nml.gif" />
  </div>
  <div class="thanks">
    <h3>But don't thank <a target="_blank" rel="noopener" href="http://twitter.com/ThePracticalDev">@ThePracticalDev</a> for this one</h3>
    <h4>This tool was created with love by Charles Berlin (<a target="_blank" rel="noopener" href="http://twitter.com/AModelEngineer">@AModelEngineer</a>)
  </div>
  <div class="usage">
    <h3>Using the Tool</h3>
    <pre>
      /orly {title};{topText};{author};{image1-40(optional)};{theme0-16(optional)}
    </pre>
    <h3>Animal Codes</h3>
    <p><i>The animal images are from the <a href="https://etc.usf.edu/clipart/" target="_blank" rel="noopener">USF ClipArt ETC</a> project.  They are used in this O RLY Cover Generator for the purposes of parody.</i></p>
    <div class="animal"><%= image_tag "1.png", alt: 'grizzly bear' %>1</div>
    <div class="animal"><%= image_tag "2.png", alt: 'cat' %>2</div>
    <div class="animal"><%= image_tag "3.png", alt: 'coyote' %>3</div>
    <div class="animal"><%= image_tag "4.png", alt: 'cow' %>4</div>
    <div class="animal"><%= image_tag "5.png", alt: 'horse' %>5</div>
    <div class="animal"><%= image_tag "6.png", alt: 'deer with antlers' %>6</div>
    <div class="animal"><%= image_tag "7.png", alt: 'baboon' %>7</div>
    <div class="animal"><%= image_tag "8.png", alt: 'wombat' %>8</div>
    <div class="animal"><%= image_tag "9.png", alt: 'platypus' %>9</div>
    <div class="animal"><%= image_tag "10.png", alt: 'bat' %>10</div>
    <div class="animal"><%= image_tag "11.png", alt: 'crested pelican' %>11</div>
    <div class="animal"><%= image_tag "12.png", alt: 'shoebill' %>12</div>
    <div class="animal"><%= image_tag "13.png", alt: 'wry-bill (bird)' %>13</div>
    <div class="animal"><%= image_tag "14.png", alt: 'raven' %>14</div>
    <div class="animal"><%= image_tag "15.png", alt: 'ostrich' %>15</div>
    <div class="animal"><%= image_tag "16.png", alt: 'chameleon' %>16</div>
    <div class="animal"><%= image_tag "17.png", alt: 'frog' %>17</div>
    <div class="animal"><%= image_tag "18.png", alt: 'mexican axolotl (salamander)' %>18</div>
    <div class="animal"><%= image_tag "19.png", alt: 'lizard' %>19</div>
    <div class="animal"><%= image_tag "20.png", alt: 'rattlesnake' %>20</div>
    <div class="animal"><%= image_tag "21.png", alt: 'catfish (sheatfish)' %>21</div>
    <div class="animal"><%= image_tag "22.png", alt: 'marbled angler fish' %>22</div>
    <div class="animal"><%= image_tag "23.png", alt: 'john dory fish' %>23</div>
    <div class="animal"><%= image_tag "24.png", alt: 'European lamprey or eel (stone sucker)' %>24</div>
    <div class="animal"><%= image_tag "25.png", alt: 'short sunfish' %>25</div>
    <div class="animal"><%= image_tag "26.png", alt: 'butterfly' %>26</div>
    <div class="animal"><%= image_tag "27.png", alt: 'moth' %>27</div>
    <div class="animal"><%= image_tag "28.png", alt: 'fly' %>28</div>
    <div class="animal"><%= image_tag "29.png", alt: 'dragonfly' %>29</div>
    <div class="animal"><%= image_tag "30.png", alt: 'stinkbug' %>30</div>
    <div class="animal"><%= image_tag "31.png", alt: 'spider' %>31</div>
    <div class="animal"><%= image_tag "32.png", alt: 'scorpion' %>32</div>
    <div class="animal"><%= image_tag "33.png", alt: 'crab' %>33</div>
    <div class="animal"><%= image_tag "34.png", alt: 'lobster' %>34</div>
    <div class="animal"><%= image_tag "35.png", alt: 'horseshoe crab' %>35</div>
    <div class="animal"><%= image_tag "36.png", alt: 'sea cucumber' %>36</div>
    <div class="animal"><%= image_tag "37.png", alt: 'abalone' %>37</div>
    <div class="animal"><%= image_tag "38.png", alt: 'jellyfish' %>38</div>
    <div class="animal"><%= image_tag "39.png", alt: 'coral' %>39</div>
    <div class="animal"><%= image_tag "40.png", alt: 'two mushrooms' %>40</div>

    <h3>Color Codes</h3>
    <div class="color" style="background-color:rgba(85,19,93,255)">0</div>
    <div class="color" style="background-color:rgba(113,112,110,255)">1</div>
    <div class="color" style="background-color:rgba(128,27,42,255)">2</div>
    <div class="color" style="background-color:rgba(184,7,33,255)">3</div>
    <div class="color" style="background-color:rgba(101,22,28,255)">4</div>
    <div class="color" style="background-color:rgba(80,61,189,255)">5</div>
    <div class="color" style="background-color:rgba(225,17,5,255)">6</div>
    <div class="color" style="background-color:rgba(6,123,176,255)">7</div>
    <div class="color" style="background-color:rgba(247,181,0,255)">8</div>
    <div class="color" style="background-color:rgba(0,15,118,255)">9</div>
    <div class="color" style="background-color:rgba(168,0,155,255)">10</div>
    <div class="color" style="background-color:rgba(0,132,69,255)">11</div>
    <div class="color" style="background-color:rgba(0,153,157,255)">12</div>
    <div class="color" style="background-color:rgba(1,66,132,255)">13</div>
    <div class="color" style="background-color:rgba(177,0,52,255)">14</div>
    <div class="color" style="background-color:rgba(55,142,25,255)">15</div>
    <div class="color" style="background-color:rgba(133,152,0,255)">16</div>
  </div>
  <div class="thanks feedback">
    <h3>If you have any feedback, you can direct message <a target="_blank" rel="noopener" href="http://twitter.com/ThePracticalDev">@ThePracticalDev</a> any time!</h3>
    <a class="second-slack" href="https://slack.com/oauth/authorize?scope=commands+bot+chat:write:bot+groups:write&client_id=3128000905.33373336070"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"></a>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<script>
$(".typing").typed({
    strings: ["/orly Making Your Own Parody Covers; Don’t even leave Slack to do it; Kanye West"],
    contentType: 'text',
    loop: false,
    callback: function() {
      setTimeout(function(){
        $("h2").animate({"margin-top": '100px'}, 300);
        setTimeout(function(){
          $(".loading").fadeIn(700);
          setTimeout(function(){
            $(".loading").hide();
            $(".cover").fadeIn(700);
            setTimeout(function(){
              $(".slack-butt").animate({width: '+=160px',"margin-left":"160px"}, 500);
              $("h4").fadeIn(1000);
              $(".loved").fadeIn(1000);
              $(".thanks").fadeIn(1000);
              $(".usage").fadeIn(1000);
              $(".second-slack").fadeIn(1000);
              $(".second-slack").css("display","block");
            },550)
          },680)
        },320)
      },150)
    },
});
</script>
